
<template>
  <div class="home">
    <!-- 考研网站推荐 -->
    <div class="white--text font-weight-bold text-h5 d-flex justify-start my-6">
      {{ titles[0] }}
    </div>
    <v-row>
      <v-col cols="12" md="3" sm="6" v-for="(item, index) in items" :key="index">
        <job-card :item="item" />
      </v-col>
    </v-row>

    <!-- 热门推荐试题（按题型四个板块） -->
    <div class="white--text font-weight-bold text-h5 d-flex justify-start my-6">
      热门推荐试题
    </div>
    <v-row class="d-flex justify-start">
      <v-col cols="12" md="3" v-for="(items, type) in hotByType" :key="type">
        <v-card class="pa-4 mb-6 elevation-4 rounded-xl">
          <div class="text-h6 font-weight-bold mb-3">{{ type }}</div>
          <v-row>
            <v-col cols="12" v-for="(item, index) in items" :key="index">
              <v-btn
                  @click="openDialog(item)"
                  class="d-block mb-2"
              >
                {{ item.title }}
              </v-btn>
            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>

    <!-- 为您推荐试题（按题型四个板块） -->
    <div class="white--text font-weight-bold text-h5 d-flex justify-start my-6">
      为您推荐试题
    </div>
    <v-row class="d-flex justify-start">
      <v-col cols="12" md="3" v-for="(items, type) in userByType" :key="type">
        <v-card class="pa-4 mb-6 elevation-4 rounded-xl">
          <div class="text-h6 font-weight-bold mb-3">{{ type }}</div>
          <v-row>
            <v-col cols="12" v-for="(item, index) in items" :key="index">
              <!-- 显示题目标题并链接到 PDF -->
              <!--              <v-btn :href="item.pdf_url" target="_blank" class="d-block mb-2">-->
              <!--                {{ item.title }}-->
              <!--              </v-btn>-->
              <v-btn
                  @click="openDialog(item)"
                  class="d-block mb-2"
              >
                {{ item.title }}
              </v-btn>
            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>

    <!-- 全局弹窗对话框 -->
    <v-dialog
        v-model="dialog"
        max-width="800"
    >
      <v-card>
        <v-card-title class="headline">
          {{ selectedItem ? selectedItem.title : '' }}

          <v-spacer></v-spacer>
          <v-btn
              icon
              @click="dialog = false"
          >
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </v-card-title>

        <v-card-text class="content-box">
          <!-- 题目内容展示 -->
          <div v-html="selectedItem && selectedItem.content"></div>
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import JobCard from "../components/JobCard";
import { getHotByType, getHot } from "../api/job";
import mixin from "../mixins/mixins";
import { getGRNNRecommend } from "../api/job";

export default {
  mixins: [mixin],
  components: { JobCard },
  name: "Home",
  data: () => ({
    titles: ["考研网站推荐"],
    items: [],
    dialog: false,
    selectedItem: null,
    hotByType: {
      阅读: [],
      翻译: [],
      写作: [],
      完型填空: []
    },
    userByType: {
      阅读: [],
      翻译: [],
      写作: [],
      完型填空: []
    }
  }),
  methods: {
    openDialog(item) {
      this.selectedItem = item;
      this.dialog = true;
    }
  },
  async mounted() {
    console.log("当前登录uid:" + this.uid);
    const hotRaw = await getHot();
    this.items = hotRaw.data.data;

    const hot = await getHotByType();
    this.hotByType = hot.data.data;

    const userRecs = await getGRNNRecommend(this.uid);
    console.log("User recommendations:", userRecs);

    if (userRecs && userRecs.data && userRecs.data.data) {
      this.userByType = userRecs.data.data;
    } else {
      console.error("无法获取用户推荐数据:", userRecs);
    }

    console.log("用户推荐数据按题型分类:", this.userByType);
  }
};
</script>

<style>
.home {
  padding: 20px;
}

.v-card {
  padding: 20px;
  margin: 10px;
}

.v-col {
  max-width: 100%;
}

.v-row {
  margin-top: 20px;
}

.v-btn {
  display: block;
  width: 100%;
  padding: 8px;
  text-align: left;
}

.text-h5 {
  font-size: 1.2em;
  margin-bottom: 20px;
}

.content-box {
  max-height: 70vh;
  overflow-y: auto;
  padding: 20px;
  line-height: 1.6;
}

.content-box >>> p {
  margin-bottom: 1em;
}

.content-box >>> code {
  background: #f5f5f5;
  padding: 2px 4px;
  border-radius: 3px;
}
</style>